<template>
	<view  class="main">
		<view class="share" id="html2canvas" ref="html2canvas">
				<img :src="$api.shareBg" class="bg" />
			<view class="top poindex">				
				<view class="title">{{goods.title}}</view>
				<view class="author">创作者: {{goods.user_name}}</view>
			</view>
			<view class="box poindex">
				<img :src="goods.thumb" class="nft" />
			</view>
			<view class="info poindex">
				<view class="ttx">
					收藏者
				</view>
				<view class="txts">
					{{goods.nickname}} 
				</view>
				<view class="ttx">
					收藏编号
				</view>
				<view class="bhbfg">
					{{goods.chain_mark}}#{{goods.code}}/{{goods.all_count}}
				</view>
				<view class="tips">
					生成时间 {{goods.create_time}}
				</view>
			</view>
			<view class="bottom poindex">
				<view class="jszc">
					疯传数藏提供技术支持
				</view>
				<view class="qrcode" ref="qrCodeUrl">
					<img :src="qrUrl" class="img" />
				</view>
			</view>
		</view>
		
		<view class="down" @click="html2canvas.create">			
			<image src="../../static/images/share/save.png" alt="" mode="aspectFit" class="save"></image>
			保存到相册
		</view>
	</view>
</template>
<script module="html2canvas" lang="renderjs">
import html2canvas from 'html2canvas';
export default {
	data(){
		return{
		}
	},
    methods: {     
		async create() {
		    try {
		        const timeout = setTimeout(async ()=> {
		            const shareContent = document.querySelector('#html2canvas');
		            const canvas = await html2canvas(shareContent,{
		                width: shareContent.offsetWidth,//设置canvas尺寸与所截图尺寸相同，防止白边
		                height: shareContent.offsetHeight,//防止白边
		                logging: true,
		                useCORS: true,
		                backgroundColor:null,
		                scale:2,
		            });
		            const base64 = canvas.toDataURL('image/png', 2);
					// console.log('[生成图片-------------]',base64)
					this.$ownerInstance.callMethod('saveShareImg', base64);
		            clearTimeout(timeout);
		        }, 500);
		    } catch(error){
		        console.log("错误",error)
		    }
		},
			
    }
}
</script>
<script>
	// import QRCode from 'qrcodejs2'
	export default {
		data() {
			return {
				goods:{},
				qrUrl:''
			}
		},
		onLoad(e) {
			this.goodsInfo(e.id)
		},
		mounted() {
			this.creatQrCode()
		},
		methods: {
			async	creatQrCode() {
					let data = await this.$http({
						url:this.$api.inviteFriends,
						method: 'POST',
						hideLoading: true,
						data: {}
					})
					if(data.code==200){
						this.qrUrl=data.data.poster_path
					}
				
				},
			async goodsInfo(id){
				let data = await this.$http({
					url:this.$api.goodsInfo,
					method: 'POST',
					hideLoading: true,
					needToken:true,
					data:{
						id:id
					}
				})
				console.log('[藏品详情]',data)
				if(data.code==200){
					this.goods = data.data.info
				}
			},
			// 保存到系统相册
				saveShareImg(base64) {
					uni.showLoading({
					  title: '正在生成图片'
					})
				    const bitmap = new plus.nativeObj.Bitmap("test");
				    bitmap.loadBase64Data(base64, function() {
				        const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
				        console.log('saveHeadImgFile', url)
				        bitmap.save(url, {
				            overwrite: true,  // 是否覆盖
				            quality: 'quality'  // 图片清晰度
				        }, (i) => {
				            uni.saveImageToPhotosAlbum({
				                filePath: url,
				                success: function() {
				                    uni.showToast({
				                        title: '图片保存成功',
				                        icon: 'none'
				                    })
									uni.hideLoading()
				                    bitmap.clear()
				                }
				            });
				        }, (e) => {
				            uni.showToast({
				                title: '图片保存失败',
				                icon: 'none'
				            })
							uni.hideLoading()
				            bitmap.clear()
				        });
				    }, (e) => {
				        uni.showToast({
				            title: '图片保存失败',
				            icon: 'none'
				        })
						uni.hideLoading()
				        bitmap.clear()
				    });
				}
		
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		background: linear-gradient(360deg, #FFFFFF 0%, #9CA1B7 100%);
		padding-top: 20rpx;
	}
	.share{
	
		height: 1292rpx;
		width: 696rpx;
		margin: 0rpx auto 20rpx;
		    position: relative;
			
			.bg{
				width: 696rpx;	
				height: 100%;
				position: absolute;
				top: 0;
				z-index: 5; 
				
			}
		.top{
			padding:52rpx 54rpx 0 ;
			.title{
				font-size: 40rpx;
				font-weight: 600;
				color: #222222;
				line-height: 56rpx;
			}
			.author{
				font-size: 24rpx;
				font-weight: 600;
				color: #666666;
				line-height: 34rpx;
			}
		}
		.box{
			margin: 84rpx auto;
			width: 100%;
			display: flex;
			align-items: center;
			.nft{
				width: 456rpx;
				height: 456rpx;
				border-radius: 40rpx;
				margin: 0rpx auto;
			}			
		}
		.info{
			margin: 142rpx 66rpx 0;
			.txts{
				font-size: 36rpx;
				font-weight: 600;
				color: #222222;
				line-height: 50rpx;
				margin: 10rpx 0;
			}
			.ttx{
				font-size: 24rpx;
				font-weight: 400;
				color: #6D7081;
			}
			.bhbfg{
				margin-top: 5rpx;
				background: linear-gradient(360deg, #9CA1B7 0%, #FFFFFF 100%);
				// background: url('../../static/images/share/bhbg.png') no-repeat ;
				background-size: 100% 100%;
				width: 290rpx;
				height: 56rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				font-weight: 600;
				color: #2D353E;
				line-height: 56rpx;
				overflow: hidden;
				text-align: center;
			}
			.tips{
				font-size: 24rpx;
				font-weight: 400;
				color: #6D7081;
				line-height: 34rpx;
				margin-top: 20rpx;
			}
			
		}
		.bottom{
			position: absolute;
			bottom: 50rpx;
			display: flex;
			justify-content: space-between;
			height: 110rpx;
			margin: 50rpx 60rpx 0;
			width: calc(100% - 120rpx);
			.jszc{font-size: 28rpx;
				font-weight: 400;
				color: #f8f8f8;
				line-height: 34rpx;
				height: 110rpx;
				line-height: 110rpx;
				}
				.qrcode{
				width: 108rpx;
				height: 108rpx;
				border-radius: 8rpx;
				border: 2rpx solid #C3AF7F;
				background: #FFFFFF;
					
				    .img {
				       width: 108rpx;
				       height: 108rpx;
				        background-color: #fff; //设置白色背景色
				        padding: 6rpx; // 利用padding的特性，挤出白边
				        box-sizing: border-box;
						border-radius: 8rpx;
				    }
				}
		}
		
	}
	.down{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 12rpx 0 18rpx;
		.save{
			height: 80rpx;
			width: 80rpx;
			margin-bottom: 14rpx;
		}
		font-size: 24rpx;
		font-weight: 400;
		color: #BBBBBB;
		line-height: 34rpx;
		text-align: center;
	}
	.poindex{
		z-index: 9;
		position: relative;
	}

</style>
